<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <form action="/xxx" @submit.prevent="handleSubmit">
      <span>用户名: </span>
      <input type="text" v-model="user.username"><br>
    
      <span>密码: </span>
      <input type="password" v-model="user.pwd"><br>
    
      <span>性别: </span>
      <input type="radio" id="female" value="女" v-model="user.sex">
      <label for="female">女</label>
      <input type="radio" id="male" value="男" v-model="user.sex">
      <label for="male">男</label><br>
    
      <span>爱好: </span>
      <input type="checkbox" id="basket" value="basket" v-model="user.likes">
      <label for="basket">篮球</label>
      <input type="checkbox" id="foot" value="foot" v-model="user.likes">
      <label for="foot">足球</label>
      <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
      <label for="pingpang">乒乓</label><br>
    
      <span>城市: </span>
      <select v-model="user.cityId">
        <option value="">未选择</option>
        <option :value="item.id" v-for="item in citys">{{item.name}}</option>
      </select><br>
    
      <span>介绍: </span>
      <textarea rows="10" v-model="user.info"></textarea><br><br>
    
      <input type="submit" value="注册">
      <input type="button" value="重置" @click="reset">
    </form>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        user: {
          username: '',
          pwd: '',
          sex: '男',
          likes: ['foot'],
          cityId: '',
          info: '',
        },
        citys: [
          {id: 1, name: 'BJ'},
          {id: 2, name: 'SH'},
          {id: 3, name: 'WH'}
        ],
      },
      methods: {
        handleSubmit () {
          console.log(JSON.stringify(this.user))
          alert('发注册的请求')
        },

        reset () {
          this.user = {
            username: '',
            pwd: '',
            sex: '男',
            likes: ['foot'],
            cityId: '',
            info: '',
          }
        }
      }
    })
  </script>
</body>
</html>